<script setup lang="ts">
  import {ref, reactive} from "vue"
  import { useRouter, useRoute, RouterView, RouterLink } from 'vue-router'
  const router = useRouter();
  const demoChildrenRouterList = reactive(
    router.getRoutes().find(item => {
      return item.name == 'demo'
    }).children || []
  )
  // demoChildrenRouterList.forEach(routerItem => {
  //   let {
  //     path,
  //     component,
  //   } = routerItem;
  //   router.addRoute('demo', { path, component})
  // })

</script>
<template>
  <div class="navs">
    <RouterLink
      class="nav-item"
      v-for="(routerItem,i) of demoChildrenRouterList"
      :to="`/demo/${routerItem.path}`"
      :class="{'nav-item-select':$route.fullPath == `/demo/${routerItem.path}`}"
    >{{ routerItem.title }}</RouterLink>
  </div>
  <section class="content-box">
    <RouterView></RouterView>
  </section>
</template>
<style lang="less" scoped>
:deep(a){
  color: #42b883;
}
:deep(pre){
  font-size:16px;
  line-height:1.6em;
}
:deep(.tabs){
    width:100%;
    height:400px;
    display:flex;
    .tabItem{
        flex:33.33%;
        margin:10px;
        border:1px solid red;
    }
}
.navs{
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  width:200px;
  overflow:auto;
  padding:20px;
  background-color:#000;
  .nav-item{
    font-size:18px;
    color: #42b883;
    margin:10px 0;
    display: block;
    height:auto;
  }
  .nav-item-select{
    color:#ff0000;
  }
}
.content-box{
  position:absolute;
  left:200px;
  top:0;
  right:0;
  bottom:0;
  padding:20px;
}
</style>
